<!-- 持续时长 -->
<template>
	<view class="publish-durationBox">
		<view :class="{
			'item':true,
			'item2': res.status
		}" v-for="(res,index) in pageData" :key="index" @click="change(res)">
			{{res.name}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			
			// 选择的项目数据
			project: {
				type: Object,
				default: ()=>{},
			},
			
			submit:{
				type: Function,
				default: ()=>{}
			},
			
		},
		data() {
			return {
				pageData:[],
				
			};
		},
		watch:{
			
			project:{
				handler(){
					// 如果单位是undefined，就返回不运行
					if (this.project.unit  === undefined ) return
					
					this.pageData = []
					
					switch(this.project.unit){
						case '天8时' : {
							for(let i=1;i<7;i++){
								this.pageData.push({
									name: i+'天/8小时',
									value: i,
									status: false
								})
							}
						};
						break;
						case '天' : {
							for(let i=1;i<7;i++){
								this.pageData.push({
									name: i+'天',
									value: i,
									status: false
								})
							}
						};
						break;
						default : {
							for(let i=3;i<9;i++){
								this.pageData.push({
									name: i+'小时',
									value: i,
									status: false
								})
							}
						}
					}
					
					
					// 默认选中
					this.change(this.pageData[0])
					
				},
				deep:true,
				immediate:true
			
			}
		},
		methods:{
			/**
			 * 更改
			 */
			change(val){
				this.pageData.map(res =>{
					if(res.value === val.value){
						res.status = true
					}else{
						res.status = false
					}
				})
				
				
				this.$emit('submit',val)
			}
		}
	}
</script>

<style lang="less" scoped>
	.publish-durationBox{
		#padding(60rpx 24rpx 0 24rpx);
		display: flex;
		flex-wrap: wrap;
		.item {
			#flex(column, center, center);
			#padding(24rpx 0);
			#box(calc((100% - 48rpx) / 3), auto, 24rpx, #F6F7FD);
		
			margin: 0 24rpx 24rpx 0;
			#font(24rpx, #333);
		
			&:nth-child(3n) {
				margin-right: 0;
			}
		
		}
		
		.item2 {
			background-color: #EC606F;
		
			color: #fff;
		}
	}
</style>
